<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
	<meta charset="UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta value="description" content=""/>
	<meta value="keywords" content=""/>
	<meta value="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<title>Keter Cloud Platform</title>
	<link type="text/css" rel="stylesheet" th:href="@{/css/common/reset.css}">
	<link type="text/css" rel="stylesheet" th:href="@{/css/common/common.css}">
	<link type="text/css" rel="stylesheet" th:href="@{/css/common/zxx.lib.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/css/common/element-ui-2.8.2.css}">
	<link type="text/css" rel="stylesheet" th:href="@{/css/login/login.css}">
</head>
<body class="login-bg2">
    <div class="abs shadow-cover ovh">
        <div class="movement" id="scene">
                    <span class="layer1">
                        <img class="layer"
                             data-depth-x="-0.3"
                             data-depth-y="0.3"
                             th:src="@{/images/0248095a8a1a1e994856fae913ff7d69b4.png}">
                    </span>
            <span class="layer2">
                        <img class="layer"
                             data-depth-x="0.3"
                             data-depth-y="-0.3"
                             th:src="@{/images/02-1df6979ce89fb4a7b28856b04d44750bf.png}">
                    </span>
            <span class="layer3">
                        <img class="layer"
                             data-depth-x="-0.3"
                             data-depth-y="0.1"
                             th:src="@{/images/0340b1f700fcbcd93006f351189c2e7c2f.png}">
                    </span>
            <span class="layer4">
                        <img class="layer"
                             data-depth-x="0.1"
                             data-depth-y="-0.3"
                             th:src="@{/images/03-1383281d7fd4e1adfda8ec03c41548569.png}">
                    </span>
            <span class="layer5">
                        <img class="layer"
                             data-depth-x="-0.3"
                             data-depth-y="0.1"
                             th:src="@{/images/04678713e10cdd5f88e2ade0f81bc1dd7a.png}">
                    </span>
            <span class="layer6">
                        <img class="layer"
                             data-depth-x="0.1"
                             data-depth-y="-0.3"
                             th:src="@{/images/04-1b8f1578ba27ac742fa3e47c25cd05ea3.png}">
                    </span>
            <span class="layer7">
                        <img class="layer"
                             data-depth-x="-0.3"
                             data-depth-y="0.1"
                             th:src="@{/images/0558c78bc5597a4246ce44fce8af0c355c.png}">
                    </span>
            <span class="layer8">
                        <img class="layer"
                             data-depth-x="0.1"
                             data-depth-y="-0.3"
                             th:src="@{/images/05-1051cdb6bc4e8837c19ca707203a27cb0.png}">
                    </span>
            <span class="layer9">
                        <img class="layer"
                             data-depth-x="0.3"
                             data-depth-y="-0.3"
                             th:src="@{/images/01cb8ac4257e3ca9e40d5a2fea07968b08.png}">
                    </span>
            <span class="layer10">
                        <img class="layer"
                             data-depth-x="-0.3"
                             data-depth-y="0.3"
                             th:src="@{/images/0660d3b231b23bb65cd3390ed33d28c6c6.png}">
                    </span>
            <span class="layer11">
                        <img class="layer"
                             data-depth-x="0.3"
                             data-depth-y="-0.4"
                             th:src="@{/images/0730034e9e8e0ac634b9c0ca0267dc8b69.png}">
                    </span>
            <span class="layer12">
                        <img class="layer"
                             data-depth-x="0.3"
                             data-depth-y="-0.4"
                             th:src="@{/images/082d532c9b843440591171152c831aadab.png}">
                    </span>
            <span class="layer13">
                        <img class="layer"
                             data-depth-x="-0.3"
                             data-depth-y="0.4"
                             th:src="@{/images/082d532c9b843440591171152c831aadab.png}">
                    </span>
            <span class="layer14">
                        <img class="layer"
                             data-depth-x="0.3"
                             data-depth-y="-0.4"
                             th:src="@{/images/082d532c9b843440591171152c831aadab.png}">
                    </span>
            <span class="layer15">
                        <img class="layer"
                             data-depth-x="-0.3"
                             data-depth-y="0.4"
                             th:src="@{/images/082d532c9b843440591171152c831aadab.png}">
                    </span>
            <span class="layer16">
                        <img class="layer"
                             data-depth-x="-0.3"
                             data-depth-y="0.4"
                             th:src="@{/images/093ea0f74da6549bc4a06e5a683e5738cd.png}">
                    </span>
            <span class="layer17">
                        <img class="layer"
                             data-depth-x="0.3"
                             data-depth-y="-0.3"
                             th:src="@{/images/010ea2f9ef67266a70956271deb3fac2477.png}">
                    </span>
            <span class="layer18">
                        <img class="layer"
                             data-depth-x="0.3"
                             data-depth-y="-0.3"
                             th:src="@{/images/011d9da4c242ca458502654fffd680e2328.png}">
                    </span>
        </div><!-- movement -->
    </div><!-- shadow-cover -->

    <div class="abs login-box2" id="app">
        <div class="tc pt20 pb20">
            <img th:src="@{/images/logo2.png}" width="300">
        </div>

        <fieldset class="login-field2">
            <legend class="tc">&nbsp; 登录 &nbsp;</legend>

            <form th:action="@{/jwtlogin}" method="post" onsubmit="return false;">
                <!-- 用户名 -->
                <div class="username-box mt20 mb20 rel">
                    <input class="login-input abs"
                           type="text"
                           name="username"
                           id="username"
                           v-model="username"
                           placeholder="请输入用户名">
                </div><!-- /user-name-box -->

                <!-- 密码 -->
                <div class="password-box rel">
                    <input class="login-input abs"
                           type="password"
                           name="password"
                           id="password"
                           v-model="password"
                           placeholder="请输入密码">
                </div><!-- /password-box -->

                <button class="login-btn"
                        type="submit"
                        @click="login">
                    登&nbsp;&nbsp;录
                </button>
            </form>
        </fieldset>

        <div class="f12 tc haha-box">
            <br>
            <div>
                版权所有 © 2019 Keter Org
            </div>
        </div>
    </div><!-- /login-box2 -->
</body>
<div th:replace="lib :: javascript_box"></div>
<script th:src="@{/lib/jquery.parallax.js}"></script>
<script type="text/javascript"> $('#scene').parallax(); </script>
<script th:src="@{/lib/login/login.js}"></script>
</html>

